<template>
	<view v-if="mood" style="background-color: #f5f5f5;">
		<Header :title="'用户信息'"></Header>
		<view class="info">
			<view class="info_item">
				<view class="title">头像</view>
				<view class="right">
					<button type="balanced" open-type="chooseAvatar" @chooseavatar="uploadimages" style="display: flex;
					align-items: center;">
						<image :src="mood.avatar" v-if="mood.avatar" mode="aspectFill"></image>
						<image src="../../../static/logo.png" mode="aspectFill" v-else></image>
						<u-icon size="18" name="arrow-right"></u-icon>
					</button>
				</view>
			</view>
			<view class="info_item">
				<view class="title">昵称</view>
				<view class="right" @click="show=true">{{mood.nickName}}</view>
			</view>
			<view class="info_item">
				<view class="title">联系电话</view>
				<view class="right">{{mood.phonenumber}}</view>
			</view>
		</view>
		<view class="btn" @click="tuichu">退出登录</view>

		<u-modal :show="show" title='修改昵称' :show-cancel-button='true' @confirm='confirm' @cancel='show=false'
			@close='show=false'>
			<view class="slot-content">
				<input type="nickname" :border='true'
					style="border: 1rpx solid #eee;border-radius: 10rpx;padding: 10rpx;font-size: 28rpx;width: 450rpx;"
					:placeholder="mood.nickname ? mood.nickname: '请输入昵称'" @input='input' :value="nickname"
					@blur="bindblur" />
			</view>
		</u-modal>
	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#21B070'
				},
				avatarUrl: '',
				mood: null,
				show: false,
				nickname: '',
				nameShow: false
			};
		},
		components: {
			Header
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.cread()
			}
		},
		watch: {
			nameShow(e) {
				this.putName(this.nickName)
			},
		},
		methods: {
			tuichu() {
				uni.removeStorageSync('token')
				uni.redirectTo({
					url: '/pages/my/login/login'
				})
			},
			confirm() {
				this.nameShow = !this.nameShow
				this.show = false
			},
			input(e) {
				this.nickName = e.detail.value;
			},
			bindblur(e) {
				// 获取微信昵称
				this.nickName = e.detail.value;
			},
			async cread() {
				let res = await this.$api.request('system/user/getInfo', 'get', {})
				this.mood = res.data.user
			},
			async put(e) {
				let that = this
				//修改头像
				let res = await this.$api.request('system/user/update', 'post', {
					avatar: e.data.url
				})

				if (res.code == '200') {
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					})
					setTimeout(() => {
						that.cread()
					}, 1000)
				}
			},
			async putName(e) {
				let that = this
				//修改名称
				let res = await this.$api.request('system/user/update', 'post', {
					nickName: e
				})
				if (res.code == '200') {
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					})
					setTimeout(() => {
						that.cread()
					}, 1000)

				}
			},
			async uploadimages(e) {
				this.avatarUrl = e.detail.avatarUrl
				//头像上传
				// this.mood.avatar = this.avatarUrl
				let that = this
				const baseUrl = uni.getStorageSync('baseUrl');
				uni.uploadFile({
					url: baseUrl + 'system/oss/upload2',
					filePath: that.avatarUrl,
					name: 'avatarUrl.jpg',
					formData: {
						name: 'avatarUrl.jpg'
					},
					header: {
						Authorization: 'Bearer ' + uni.getStorageSync('token'),
					},
					success: (res) => {
						console.log(res)
						that.put(JSON.parse(res.data))
					},
					fail: (error) => {
						uni.showToast({
							title: error,
							duration: 2000
						});
					},
					complete: () => {
						uni.hideLoading();
					}
				});

			},
		}
	};
</script>

<style scoped lang="scss">
	button {
		box-shadow: none;
		background-color: transparent;
		height: 80rpx;
		border: none;
		padding: 0%;
	}

	button:after {
		border: none;
	}

	.slot-content {
		padding: 20rpx;
		margin-top: 30rpx;
	}

	.info {
		margin: 30rpx;
		background-color: #fff;
		padding: 0 30rpx;
		border-radius: 20rpx;

		.info_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			line-height: 110rpx;
			border-bottom: 1px solid #ececec;

			.right {
				display: flex;
				align-items: center;
				margin-left: 20rpx;

				image {
					margin-right: 20rpx;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}

			&:last-child {
				border-bottom: none;
			}
		}
	}

	.btn {
		margin: 66rpx 60rpx 0;
		text-align: center;
		background-color: #D42A1B;
		font-size: 30rpx;
		padding: 24rpx 0;
		line-height: 42rpx;
		color: #fff;
		border-radius: 45rpx;
	}
</style>